<template>
  <div style="padding-top: 20px">
    <div class="project-list">
      <a-divider orientation="left">
        <div class="project-divider">
          <img src="@/assets/svg/我的项目.svg" /> 我的项目
        </div>
      </a-divider>

      <a-row v-if="myProjectList.length">
        <project-item
          v-for="(project, index) in myProjectList"
          :key="index"
          :projectInfo="project"
          @refresh="getList"
          :showDelBtn="true"
        />
      </a-row>
      <a-empty v-else />
    </div>

    <div class="project-list">
      <a-divider orientation="left"
        ><div class="project-divider">
          <img src="@/assets/svg/公开项目.svg" /> 公开项目
        </div></a-divider
      >

      <a-row v-if="otherProjectList.length">
        <project-item
          v-for="(project, index) in otherProjectList"
          :key="index"
          :projectInfo="project"
          @refresh="getList"
        />
      </a-row>

      <a-empty v-else />
    </div>
  </div>
</template>

<script>
import ProjectItem from "./components/projectItem.vue";
import { getPrototypeList } from "@/api/prototype";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 搜索表单
      formData: {
        name: null
      }
    };
  },
  async created() {
    this.$bus.$on("refreshProtoList", () => {
      this.getList();
    });
    this.getList();
  },
  methods: {
    ...mapActions({
      setList: "proto/setList"
    }),
    async getList() {
      await this.getPrototypeList(0);
      await this.getPrototypeList(1);
    },
    async getPrototypeList(type, name) {
      try {
        const { code, data } = await getPrototypeList({
          name,
          type
        });
        if (code == 200) {
          const setType = type == 0 ? "otherProjectList" : "myProjectList";
          this.setList({
            type: setType,
            list: data
          });
        }
      } catch (error) {}
    }
  },
  computed: {
    ...mapGetters({
      myProjectList: "proto/myProjectList",
      otherProjectList: "proto/otherProjectList"
    })
  },
  components: {
    ProjectItem
  }
};
</script>

<style lang="scss" scoped>
.project-list {
  margin: 0 auto 20px;
  .project-divider {
    display: flex;
    align-items: center;
    height: 100%;
    color: rgba(0, 0, 0, 0.45);
    img {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
  }
}
</style>
